<template>
  <div class="homeheader">
      <div>
          <p>
          <span class="iconfont icon-sousuo"></span>
         <input type="text" placeholder="JavaScript实战教学">
          </p>
        <span class="iconfont icon-xinfeng"></span>
      </div>

  </div>
</template>

<script>

export default {

}
</script>

<style scoped>
.homeheader>div{
  width: 100%;
  height: 0.28rem;
  display: flex;
  justify-content: center;
margin-top: 0.1rem;
}
.homeheader>div>p{
  width: 2.87rem;
  height: 0.28rem;
  /* line-height: 0.28rem; */
  background-color:#ededed;
  border-radius: 0.5rem;
  padding-left: 0.1rem;
   margin: auto;
   display: flex;
   overflow: hidden;
}
.homeheader>div>p>span{
  font-size: 0.12rem;
  
  line-height: 0.28rem;
  height: 0.28rem;
  color: #adadadad;
}
.homeheader>div>p>span:nth-child(1){
  color: black;
  width: 0.12rem;
}
.homeheader>div>p>input{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background-color:#ededed;
  margin-left: 0.1rem;
  color: #000;
  font-size: 0.12rem;
 
}
.homeheader>div>span{
  width: 0.5rem;
  height: 0.28rem;
  line-height: 0.28rem;
}
.icon-xinfeng{
  text-align: center;
  font-size: 20px;
  color: black;
}
</style>